<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="author" content="lijinbo" />
    <title>243-跳动的波浪线动画</title>
    <style>
      .box {
        color: #f30;
        text-decoration: underline;
        padding: 2px 0;
      }
      .box:hover {
        color: #f30;
        text-decoration: none;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 4'%3E%3Cpath fill='none' stroke='%23ff3300' d='M0 3.5c5 0 5-3 10-3s5 3 10 3 5-3 10-3 5 3 10 3'/%3E%3C/svg%3E")
          repeat-x 0 100%;
        background-size: 20px auto;
        animation: waveMove 1s infinite linear;
      }
      @keyframes waveMove {
        from {
          background-position: 0 100%;
        }
        to {
          background-position: -20px 100%;
        }
      }
    </style>
  </head>

  <body>
    <a href="https://www.zhangxinxu.com/" target="_blank" class="box">鑫空间，鑫生活 - 张鑫旭</a>
  </body>
</html>
